<template>
    <Panel   shadow :padding="10">
      <el-table
        :data="chapter"
        style="width: 100%">
        <el-table-column
          label="标题"
          prop="name"          >
        </el-table-column>        
        <el-table-column
          label="介绍"
          prop="introduce"          >
        </el-table-column>
        <el-table-column
          label="学生数量"
          prop="students"          >
        </el-table-column>
        <el-table-column
          label="价格"
          prop="price"          >
        </el-table-column>        
        <el-table-column
          label="练习题目"
          prop="problems"          >
          <template slot-scope='scope'>
            <div>题目：
              <div v-for="(problem, index) in scope.row.problems" :key="index" style="display:inline" >{{problem._id}}: {{problem.title}}; </div>
            </div>
          </template>
        </el-table-column>        
        <el-table-column
          label="排序"
          prop="chapter_order"          >
        </el-table-column>        
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="goSection(scope.row.id)" size="small">查看节</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="编辑章" :visible.sync="editing" :close-on-click-modal = "false">
        <el-form :inline="true"  ref="form" :model="editchapter">
          <el-form-item label="标题">
            <el-input  v-model="editchapter.name"></el-input>
          </el-form-item>
          <el-form-item label="课程介绍">
            <el-input type="textarea" v-model="editchapter.introduce"></el-input>
          </el-form-item>
          <el-form-item label="学生数量">
            <el-input v-model="editchapter.students"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="editchapter.price"></el-input>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="editchapter.chapter_order"></el-input>
          </el-form-item>
          <el-form-item label="练习题目">
            <div  v-for="(item, index) in editchapter.problems" :key="index" style="padding:2px; border:1px solid burlywood; margin-bottom: 3px;display: flex;" >
              <div><el-input v-model="item._id" placeholder="题号"> </el-input> </div>
              <div><el-input v-model="item.title" placeholder="标题"></el-input> </div>
              <el-button @click="delProblem(index)">删除题目 </el-button>
            </div>
            <el-button @click="addProblem">新增题目</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!adding" type="primary" @click="onSubmit">更新</el-button>
            <el-button v-if="adding" type="primary" @click="onSubmit">新增</el-button>
          </el-form-item>
        </el-form>
      </el-dialog >
      <el-button style="margin-top:20px" type="primary" @click="addChapter">
        新增
      </el-button>
    </Panel>
  </template>
  <script>
    import api from '../../api.js'
    import utils from '@/utils/utils'

    export default {
      name: 'chapter',
      data () {
        return {
          chapter: [],
          editchapter: {},
          editing: false,
          adding: false,
          query: {},
          chapter_problems: []
        }
      },
      mounted () {
        this.init()
      },
      methods: {
        init () {
          this.query.course_id = this.$route.query.course_id
          // this.changeRoute()
          this.getChapterList()
        },
        getChapterList () {
          api['getChapter'](this.query.course_id).then((res) => {
            this.chapter = res.data.data
          }).catch()
        },
        changeRoute () {
          let query = Object.assign({}, this.query)
          this.$router.push({
            name: 'chapter',
            query: utils.filterEmptyValue(query)
          })
        },
        handleEdit (index, row) {
          this.editing = true
          this.editchapter['id'] = this.chapter[index].id
          this.editchapter['name'] = this.chapter[index].name
          this.editchapter['students'] = this.chapter[index].students
          this.editchapter['price'] = this.chapter[index].price
          this.editchapter['chapter_order'] = this.chapter[index].chapter_order
          this.editchapter['introduce'] = this.chapter[index].introduce
          this.editchapter['course_id'] = this.chapter[index].course
          this.editchapter['problems'] = this.chapter[index].problems
          this.editchapter = JSON.parse(JSON.stringify(this.editchapter))
          // this.chapter_problems = []
          // console.log(this.editchapter['problems'])
          // this.editchapter['problems'].forEach((problem) => {
          //   this.chapter_problems.push(JSON.stringify(problem))
          // })
          console.log(index, row.title)
        },
        onSubmit () {
          // this.editchapter['problems'].forEach((problem, index) => {
          //   problem = JSON.parse(this.chapter_problems[index])
          // })
          let params = this.editchapter
          console.log('par', params)
          if (!this.adding) {
            api['editChapter'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getChapterList()
            }).catch()
          } else {
            api['addChapter'](params).then((res) => {
              this.editing = false
              this.adding = false
              this.getChapterList()
            }).catch()
          }
        },
        addChapter () {
          this.editing = true
          this.adding = true
          this.editchapter = {course_id: this.query.course_id, problems: []}
          this.chapter_problems = []
        },
        addProblem () {
          this.editchapter['problems'].push({
            _id: '',
            title: ''
          })
          console.log(this.editchapter['problems'])
        },
        delProblem (index) {
          console.log(index)
          this.editchapter['problems'].splice(index, 1)
        },
        goSection (id) {
          console.log('iddd', id)
          this.$router.push({name: 'section', query: {chapter_id: id}})
          this.chapter_problems.push('[{"_id":"xxx", "title": "tttt"},{"_id":"yyy", "title": "wwww"}]')
        }
      }
    }
  </script>
  
  <style scoped lang="less">
  </style>
  